<template>
  <div class="user-likes">
    <el-card>
      <div slot="header" class="clearfix">
        <span>我的收藏</span>
      </div>
      
      <div class="empty-block" v-if="likesList.length === 0">
        <el-empty description="暂无收藏记录，快去欣赏并收藏喜欢的作品吧！">
          <el-button type="primary" @click="$router.push('/')">浏览作品</el-button>
        </el-empty>
      </div>
      
      <div v-else class="likes-container">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="item in likesList" :key="item.id" class="like-item-col">
            <el-card :body-style="{ padding: '0px' }" class="like-item-card" shadow="hover">
              <div class="image-container" @click="viewDetail(item.photoId)">
                <el-image 
                  :src="item.photoImgUrl" 
                  fit="cover"
                  :preview-src-list="[item.photoImgUrl]">
                  <div slot="error" class="image-error">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </div>
              <div class="photo-info">
                <div class="photo-title" @click="viewDetail(item.photoId)">{{ item.photoTitle }}</div>
                <div class="photo-author">
                  <i class="el-icon-user"></i> {{ item.photoAuthor }}
                </div>
                <div class="like-time">
                  <i class="el-icon-time"></i> {{ formatDate(item.createTime) }}
                </div>
                <div class="operations">
                  <el-button 
                    type="text" 
                    icon="el-icon-view" 
                    @click="viewDetail(item.photoId)">查看</el-button>
                  <el-button 
                    type="text" 
                    icon="el-icon-star-off" 
                    @click="cancelLike(item)"
                    class="cancel-btn">取消收藏</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        
        <div class="pagination" v-if="total > 0">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'UserLikes',
  data() {
    return {
      likesList: [],
      currentPage: 1,
      pageSize: 12,
      total: 0,
      loading: false
    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  created() {
    this.fetchUserLikes()
  },
  methods: {
    async fetchUserLikes() {
      this.loading = true
      try {
        const params = {
          page: this.currentPage,
          pageSize: this.pageSize,
          userId: this.userId
        }
        const res = await this.$http.get('/likes/user', { params })
        if (res.data.code === 1) {
          this.likesList = res.data.data.records
          this.total = res.data.data.total
        } else {
          this.$message.error('获取收藏记录失败')
        }
      } catch (error) {
        console.error('获取收藏记录失败', error)
        this.$message.error('获取收藏记录失败')
      } finally {
        this.loading = false
      }
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.fetchUserLikes()
    },
    formatDate(dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    viewDetail(photoId) {
      this.$router.push(`/detail/${photoId}`)
    },
    async cancelLike(item) {
      try {
        this.$confirm('确认取消收藏该作品吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await this.$http.delete(`/likes/${item.id}`)
          if (res.data.code === 1) {
            this.$message.success('取消收藏成功')
            this.fetchUserLikes()
          } else {
            this.$message.error(res.data.msg || '操作失败')
          }
        }).catch(() => {})
      } catch (error) {
        console.error('取消收藏失败', error)
        this.$message.error('操作失败')
      }
    }
  }
}
</script>

<style scoped>
.empty-block {
  margin: 40px 0;
}

.likes-container {
  margin-top: 20px;
}

.like-item-col {
  margin-bottom: 20px;
}

.like-item-card {
  transition: transform 0.3s ease;
}

.like-item-card:hover {
  transform: translateY(-5px);
}

.image-container {
  height: 200px;
  overflow: hidden;
  cursor: pointer;
}

.el-image {
  width: 100%;
  height: 100%;
}

.image-error {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 30px;
}

.photo-info {
  padding: 14px;
}

.photo-title {
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 8px;
  color: #303133;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.photo-title:hover {
  color: #409EFF;
}

.photo-author, .like-time {
  font-size: 13px;
  color: #909399;
  margin-bottom: 5px;
}

.operations {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.cancel-btn {
  color: #F56C6C;
}

.cancel-btn:hover {
  color: #f78989;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style> 